<template>
  <div class="appointment">
    <header>
      <el-button type="primary" class="el-icon-s-order" @click="appRecordShow"> 预约记录</el-button>
      <el-button type="success" class="el-icon-circle-plus-outline" @click="addShow = true"> 新增规则</el-button>
    </header>

    <section>
      <el-table border height="100%" :data="tableData" v-loading="tableLoading">
        <el-table-column label="规则名称" prop="ruleName" align="center"></el-table-column>
        <!-- <el-table-column label="适用车场数" prop="parkCount" align="center"></el-table-column> -->
        <el-table-column label="停车场名称" prop="parkName" align="center"></el-table-column>
        <el-table-column label="预约费用" align="center">
          <template slot-scope="scope">
            7:00-11:00点 {{scope.row.feeScaleList[0].amount}}元
            11:00-17:00点 {{scope.row.feeScaleList[1].amount}}元
          </template>
        </el-table-column>
        <el-table-column label="车场分成(%)" prop="parkDivide" align="center"></el-table-column>
        <el-table-column label="状态" prop="" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="" align="center">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="warning" @click="updateShow = true;row = scope.row">修改</el-button> -->
            <el-button size="mini" type="danger" @click="delate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="100"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="addShow" width="720px" :close-on-click-modal="false" :close-on-press-escape="false">
      <addRules v-if="addShow" @closeDialog="addShow = false" @refresh="getReserveRulePage" />
    </el-dialog>

    <el-dialog :visible.sync="updateShow" width="720px" :close-on-click-modal="false" :close-on-press-escape="false">
      <updateRule v-if="updateShow" :row="row" @closeDialog="updateShow = false" @refresh="getReserveRulePage" />
    </el-dialog>

  </div>
</template>

<script>
  import addRules from './components/addRules.vue'
  import updateRule from './components/updateRule.vue'

  export default {
    name: 'appointment',
    components: { addRules , updateRule },
    data() {
      return {
        addShow: false,
        updateShow: false,
        searchForm: {
          pageNum: 1,
          pageSize: 10
        },
        tableData: [],
        total: null,
        tableLoading: true
      }
    },
    mounted() {
      this.getReserveRulePage();
    },
    methods: {
      getReserveRulePage() {
        this.$axios({
          method: 'get',
          url: '/promotion/reserve-rule/getReserveRulePage',
          params: this.searchForm
        }).then(res => {
          if(res.code == 200) {
            res.data.records.forEach(item => {
              item.status = item.status == 1 ? true : false
            })
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.tableLoading = false;
          }
        })
      },
      switchStatus(e) {
        const status = e.status == true ? 1 : 0;
        this.$axios({
          method: 'post',
          url: '/promotion/reserve-rule/switchStatus',
          data: this.$qs.stringify({ id: e.id, status: status })
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('规则状态修改成功！')
            this.getReserveRulePage();
          } else {
            this.$message.warning('规则状态修改失败！')
          }
        })
      },
      delate(item) {
        this.$confirm('确定删除此规则？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定删除',
          cancelButtonText: '放弃删除'
        })
          .then(() => {
            this.$axios({
              method: 'post',
              url: '/promotion/reserve-rule/deleteRule',
              data: this.$qs.stringify({id: item.id})
            }).then(res => {
              if(res.code == 200) {
                this.$message.success('删除成功');
                this.getReserveRulePage();
              } else {
                this.$message.warning(res.desc)
              }
            })
          })

        console.log(item)

      },
      appRecordShow() {
        this.$emit('switch',false);
      },
      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getReserveRulePage();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.pageNum = val;
        this.getReserveRulePage();
      }
    }
  }
</script>

<style scoped>
  .appointment {
    height: 100%;
  }
  header {
    height: 50px;
  }
  section {
    height: calc(100% - 80px);
  }
  footer {
    height: 50px;
    width: 100%;
  }
  .el-icon-circle-plus-outline {
    float: right;
    margin-right: 20px;
  }


</style>
